<template>
  <div id="bg-penuh">
    <div class="login">
      <h2>登录</h2>
      <a-form
        ref="formRef"
        :model="formState"
        class="login-form"
        name="normal_login"
      >
        <a-form-item
          :rules="[{ required: true, message: '账户不能为空' }]"
          name="username"
        >
          <a-input
            v-model:value="formState.username"
            placeholder="请输入你的账户"
          >
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          :rules="[{ required: true, message: '密码不能为空' }]"
          name="password"
        >
          <a-input-password
            v-model:value="formState.password"
            placeholder="请输入你的密码"
          >
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item name="remember" no-style>
          <a-row>
            <a-col :span="12">
              <a-checkbox v-model:checked="formState.remember"
                >记住我</a-checkbox
              >
            </a-col>
            <a-col :span="12" style="text-align: end">
              <a class="login-form-forgot" href="">忘记密码</a>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item>
          <div class="btn">
            <a-button
              :disabled="disabled"
              class="login-form-button"
              html-type="submit"
              type="primary"
              @click="onSubmit"
              :loading="iconLoading"
            >
              登录
            </a-button>
          </div>
        </a-form-item>
        <div class="info">
          还没有账号？<a class="login-form-forgot" href="">立即注册</a>
        </div>
      </a-form>
    </div>
    <div class="footer">
      <i>© LLJ's的博客 2024</i>
      <a href="https://beian.miit.gov.cn/" target="_blank"
        >赣ICP备2024042157号-1</a
      >
    </div>
  </div>
</template>

<script setup>
import { userStore } from "@/store/modules/user.js";
import { computed, reactive, ref, toRaw } from "vue";
import { LockOutlined, UserOutlined } from "@ant-design/icons-vue";
import router from "@/router/index.js";
import { message } from "ant-design-vue";
import { set } from "nprogress";
let iconLoading = ref(false);
const formRef = ref(null);
const user = userStore();
const formState = reactive({
  username: "",
  password: "",
  remember: true,
});
const onSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      iconLoading.value = true;
      const info = toRaw(formState);
      await user.LoginUser(info);
      await user.loginLog();
      iconLoading.value = false;
      setTimeout(() => {
        router.push("/");
      }, 1000);
    })
    .catch((error) => {
      message.error(error);
    });
};
const disabled = computed(() => {
  return !(formState.username && formState.password);
});
</script>

<style lang="scss" scoped>
#bg-penuh {
  height: 100vh;
  width: 100vw;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.298039) 0px 2000px inset;
  background: url("@/assets/image/wheather.jpg") no-repeat center center fixed;
  background-size: cover;

  .login {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border-radius: 10px;
    background-color: transparent;
    backdrop-filter: blur(20px);

    h2 {
      width: 100%;
      font-size: 25px;
      font-weight: 600;
      text-align: center;
      margin: 15px 0;
    }

    .login-form-forgot {
      color: #1677ff;
    }

    .btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;

      .login-form-button {
        width: 80%;
      }
    }

    .info {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: end;
    }
  }

  .footer {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;

    a {
      color: #fff;
      font-weight: bold;
      text-decoration: none;
    }
  }
}
</style>
